<template>
  <div id="smokePie" ref="smokePie" class="smoke-eacht"></div>
</template>

<script>
export default {
  props: {
    echartData: [],
  },
  data() {
    return {};
  },
  components: {},
  mounted() {
    // this.echartsInit();
  },
  beforeDestroy() {},
  methods: {
    echartsInit() {
      console.log("this.echartData----->");
      console.log(this.echartData);
      var data = this.echartData;
      this.$echarts.init(this.$refs.smokePie).setOption(
        {
          max: 100,
          tooltip: {
            trigger: "item",
            backgroundColor: "rgba(0,0,0,0.8)",
            borderColor: "rgba(0,0,0,0.8)",
            borderWidth: 0,
            textStyle: {
              color: "#fff",
            },
            formatter: function (params) {
              return `${params.data.name} : ${params.data.num} (${params.data.value}%)`;
            },
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: ["40%", "90%"],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 2,
              },
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 10,
                  fontWeight: "bold",
                  color: "#fff",
                  rich: {
                    num: {
                      color: "#34EFFE",
                    },
                  },
                  formatter: function (params) {
                    console.log("params----->");
                    console.log(params);
                    return `{num|${params.data.value}%}\n${params.data.name}`;
                  },
                },
              },
              labelLine: {
                show: false,
              },
              data: data,
            },
          ],
        },
        true
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.smoke-eacht {
  width: 100%;
  height: 100%;
}
</style>
